<form [formGroup]="formModel" name="searchForm" (ngSubmit)="onSearch()" novalidate>
  <div class="form-group" [class.has-error]="formModel.hasError('minlength','title')">
    <label for="productTitle">商品名称：</label>
    <input type="text" id="productTitle" placeholder="商品名称" class="form-control" formControlName="title">
    <span class="help-block" [class.hidden]="!formModel.hasError('minlength','title')">请至少输入三个字符</span>
  </div>
  <div class="form-group" [class.has-error]="formModel.hasError('positiveNumber','price')">
    <label for="productPrice">商品价格：</label>
    <input type="number" id="productPrice" placeholder="商品价格" class="form-control" formControlName="price">
    <span class="help-block" [class.hidden]="!formModel.hasError('positiveNumber','price')">请输入正数</span>
  </div>
  <div class="form-group">
    <label for="productCategory">商品类别：</label>
    <select id="productCategory" class="form-control" formControlName="category">  
      <option value="-1">全部分类</option>
      <!-- 循环出来的category变量被绑定到option的value属性上 -->
      <option *ngFor="let category of categories" [value]="category">{{category}}</option>
    </select>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>
</form>